---
title: LinearGradient
description: A universal React component that renders a gradient view.
sourceCodeUrl: 'https://github.com/expo/expo/tree/main/packages/expo-linear-gradient'
packageName: 'expo-linear-gradient'
iconUrl: '/static/images/packages/expo-linear-gradient.png'
platforms: ['android', 'ios', 'tvos', 'web']
---

import APISection from '~/components/plugins/APISection';
import { APIInstallSection } from '~/components/plugins/InstallSection';
import { SnackInline } from '~/ui/components/Snippet';

`expo-linear-gradient` provides a native React view that transitions between multiple colors in a linear direction.

## Installation

<APIInstallSection />

## Usage

<SnackInline label='Linear Gradient' dependencies={['expo-linear-gradient']}>

```tsx
import { StyleSheet, Text, View } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />
      <LinearGradient
        // Button Linear Gradient
        colors={['#4c669f', '#3b5998', '#192f6a']}
        style={styles.button}>
        <Text style={styles.text}>Sign in with Facebook</Text>
      </LinearGradient>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'orange',
  },
  background: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 300,
  },
  button: {
    padding: 15,
    alignItems: 'center',
    borderRadius: 5,
  },
  text: {
    backgroundColor: 'transparent',
    fontSize: 15,
    color: '#fff',
  },
});
```

</SnackInline>

## API

```js
import { LinearGradient } from 'expo-linear-gradient';
```

<APISection packageName="expo-linear-gradient" />
